<template>
  <header
    class="h-[var(--header-height)] bg-white/75 backdrop-blur w-full sticky top-0 z-50"
  >
    <div class="flex justify-between max-w-7xl h-full mx-auto">
      <div class="leading-[var(--header-height)]">logo</div>
      <div class="flex justify-center items-center">
        <template v-for="(link, index) in links" :key="link.label">
          <div class="group/parent">
            <UButton
              variant="ghost"
              color="gray"
              @click.stop="toPath(link.to, index)"
            >
              <div
                class="relative flex items-center text-gray-700"
                :class="{ 'text-primary': activeIndex == index }"
              >
                <span
                  class="font-semibold dark:text-[#fff] group-hover/parent:text-primary relative"
                  >{{ link.label }}</span
                >
                <UIcon
                  v-if="link.children"
                  class="text-[22px] transition group-hover/parent:text-primary group-hover/parent:rotate-180"
                  name="i-material-symbols-keyboard-arrow-down-rounded"
                ></UIcon>
                <div
                  v-if="link.children"
                  class="hidden absolute top-[25px] left-0 translate-x-[-50%] w-[250px] border bg-white dark:bg-black dark:border-[#333] rounded-lg shadow-lg border-[#eee] group-hover/parent:block p-[10px] text-left"
                >
                  <div
                    v-for="(item, sIndex) in link.children"
                    :key="item.label"
                    class="p-[10px] group hover:bg-gray-100 rounded-lg"
                    :class="{ 'active group': activeSIndex == sIndex }"
                    @click.stop="toPath(item.to, index, sIndex)"
                  >
                    <div
                      class="group-[.active]:text-primary group-hover:text-primary text-gray-700 font-semibold"
                    >
                      <UIcon :name="item.icon" class="mx-[5px]"></UIcon>
                      <span>{{ item.label }}</span>
                    </div>
                    <div class="pl-[20px] text-gray-400">{{ item.desc }}</div>
                  </div>
                </div>
              </div>
            </UButton>
          </div>
        </template>
      </div>

      <div class="flex items-center">
        <UTooltip text="search" :shortcuts="['ctrl', 'k']">
          <UButton
            icon="i-material-symbols-frame-inspect-rounded"
            variant="ghost"
            color="gray"
            square
          ></UButton>
        </UTooltip>
        <UTooltip :text="`switch ${colorMode.value} mode`">
          <UButton
            color="gray"
            variant="ghost"
            @click="changeColorMode"
            :icon="
              colorMode.value == 'dark'
                ? 'i-material-symbols-dark-mode'
                : 'i-material-symbols-light-mode-outline'
            "
          />
        </UTooltip>
        <UTooltip text="github start" :shortcuts="['⌘', 'O']">
          <UButton color="gray" variant="ghost" icon="i-mdi-github">
            50k</UButton
          >
        </UTooltip>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts" name="AppHeader">
const links = [
  {
    label: '文档',
    to: '/docs/exp',
    children: [
      {
        label: '开始使用',
        icon: 'i-material-symbols-graphic-eq-rounded',
        to: '/docs/exp',
        desc: '了解如何开始使用nuxt',
      },
      {
        label: '遇到的问题',
        to: '/docs/question',
        icon: 'i-material-symbols-graphic-eq-rounded',
        desc: '学习如何构建和部署nuxt应用程序',
      },
      {
        label: 'api',
        to: '/docs/exp1',
        icon: 'i-material-symbols-graphic-eq-rounded',
        desc: '探索nuxt api',
      },
      {
        label: '示例',
        to: '/',
        icon: 'i-material-symbols-graphic-eq-rounded',
        desc: '发现和探索官方和社区的示例',
      },
      {
        label: '社区',
        to: '/',
        icon: 'i-material-symbols-graphic-eq-rounded',
        desc: '从社区寻找答案和支持',
      },
    ],
  },
  {
    label: '集成',
    to: '/',
  },
  {
    label: '资源',
    to: '',
  },
  {
    label: '展示',
    to: '',
  },
  {
    label: '企业',
    to: '',
  },
  {
    label: '博客',
    to: '',
  },
  {
    label: '英文网站',
    to: '',
  },
  {
    label: '加入社区',
    to: '',
  },
]
const colorMode = useColorMode()
const activeIndex = ref(0)
const activeSIndex = ref()
getActive()

function changeColorMode() {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
function toPath(to: string, index: number, sindex: number = 0) {
  useRouter().push(to)
  activeIndex.value = index
  activeSIndex.value = sindex
}
function getActive() {
  activeIndex.value = links.findIndex(
    (item) => item.to.split('/')[1] == useRoute().path.split('/')[1]
  )
  activeSIndex.value = links[activeIndex.value]?.children?.findIndex(
    (item) => item.to == useRoute().path
  )
}
</script>

<style scoped></style>
